<template>
  <div class="tableList" @click="isShow=false">
    <div class="common-list">
      <table class="temp-table">
        <thead>
        <tr>
          <th style="width: 200px">邮件地址</th>
          <th style="width: 200px">客户名称</th>
          <th style="cursor: pointer;width: 300px"><span @click.stop="isShow=!isShow">邮件主题<i
            class="el-icon-arrow-down"></i></span>
            <div class="menus" v-show="isShow" @click.stop="isShow=true">
              <el-radio-group v-model="checked" @change="handleChange">
                <el-radio label="">所有主题</el-radio>
                <el-radio v-for="item,index in account" :key="index" :label="item.emailSubject">{{item.emailSubject}}
                </el-radio>
              </el-radio-group>
            </div>
          </th>
        </tr>
        </thead>
        <tbody style="max-height: 350px;overflow-y: auto">
        <tr v-for="item,index in tableData" :key="index">
          <td class="more" style="width: 200px;" :title="item.addresseeEmail">{{item.addresseeEmail}}</td>
          <td style="width: 200px" class="more" :title="item.custName">{{item.custName}}</td>
          <td style="width: 300px" class="more" :title="item.emailSubject">{{item.emailSubject}}</td>
        </tr>
        <tr v-show="isEnd" class="empty-img" style="background-color: #fff;border-bottom: 0">
          <td colspan="8" style="background-color: #fff">
            <img src="../../../../public/img/empty.png" alt="">
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <el-pagination class="fixed"
                   background align="right"
                   @current-change="handleCurrent"
                   @size-change="handleSizeChange"
                   :current-page="currentPage"
                   :page-size="currentSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>
<script>
    import {getTargetEmailList, getTargetEmailTitle} from '@/api/marketStatic/email'

    export default {
        name: "TableList",
        props: ['ruleID'],
        data() {
            return {
                tableData: [],
                currentPage: 1,
                currentSize: 10,
                total: 0,
                isShow: false,
                checked: '',
                isEnd: false,
                account: []
            };
        },
        mounted() {
            this.getList();
            this.getTitle();
        },
        methods: {
            handleChange(val) {
                this.checked = val;
                this.isShow = false;
                this.handleCurrent(1);
            },
            handleCurrent(val) {
                this.currentPage = val;
                this.getList();
            },
            handleSizeChange(val) {
                this.currentSize = val;
                this.handleCurrent(1)
            },
            //获取邮件列表
            getList() {
                const params = {
                    ruleId: parseInt(this.ruleID),
                    type: 5,
                    current: this.currentPage,
                    size: this.currentSize,
                    emailSubject: this.checked
                }
                getTargetEmailList(params).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        this.tableData = result.records;
                        this.total = result.total;
                        this.isEnd = result.total == 0;
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //获取主题列表
            getTitle() {
                getTargetEmailTitle(this.ruleID, 5).then(res => {
                    if (res.data.success) {
                        this.account = res.data.data;
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    }
</script>

<style scoped>

</style>
